import { Component } from 'react';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import EmptyContent from '@/components/EmptyContent';
import { globalStore } from '@/store';
import { getAppointmentList } from '@/service/apis/service/index';
import AppoitItem from '../components/AppoitItem/index';
import './index.scss';

export default class Index extends Component {
  state = {
    list: [],
  };
  componentDidMount = async () => {
    this.getCateList();
  };

  onHandle = (appoint: any) => {
    console.log('appoint: ', appoint);
    Taro.navigateTo({
      url: `/pages/appointment/detail/index?id=${appoint.id}&serviceType=shangmen`,
    });
  };

  getCateList = async () => {
    try {
      const { data } = await getAppointmentList({
        store_name: globalStore.currentShop.store_name,
      });
      this.setState({
        list: data.appoint_services,
      });
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };

  render() {
    const { list } = this.state;
    return (
      <View className="appoint-container">
        <View className="appoint-list">
          {list.map((appoint, key) => {
            return (
              <AppoitItem
                key={key}
                index={key}
                appoint={appoint}
                onHandle={() => this.onHandle(appoint)}
              />
            );
          })}
          {list.length === 0 && <EmptyContent offsetTop={50} title="暂无相关服务" />}
        </View>
      </View>
    );
  }
}
